<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE>
<html>
<head>
	<title>ActivitySystem</title>
	<%@ include file="/WEB-INF/views/include/head.jsp"%>
	<style>
		.switch{
			width:44px;
			height:22px;
			/* border:1px solid #264dbe; */
			border-radius:22px;
			overflow:hidden;
		}
		.switch>div{
			position:relative;
			width:100%;
			height:100%;
			background:#ccc;
		}
		.switch>div>b{
			position:absolute;
			top:1px;
			left:1px;
			diplay:block;
			width:20px;
			height:20px;
			background:#fff;
			border-radius:20px;
		}
		.switch.active>div{
			background:#264dbe;
		}
		.switch.active>div>b{
			left:23px;
		}
	</style>
</head>
<body>
<%@ include file="/WEB-INF/views/include/loading.jsp"%>
<!-- 数据列表  -->
<div class="easyui-layout" data-options="fit:true,border:false">
	<div data-options="region:'center'">
		<table id="Grid" class="easyui-datagrid" title="" ctrlSelect="true" striped="true"
		       rownumbers="true" pagination="true" fitColumns="true" toolbar="#Grid_Toolbar"
		       loadMsg="正在加载数据，请稍等..." emptyMsg="没有找到符合条件的数据"
		       data-options="url:'${ctx}/accesssystem/systemActivity/list',fit:true, fitColumns:true, checkOnSelect:true, selectOnCheck:true, border: false,onDblClickRow:onDblClickRow">
			<thead>
			<tr>
				<th data-options="field:'ck',checkbox:true"></th>
				<th data-options="field:'id',hidden:true">id</th>
				<th data-options="field:'activityId',hidden:true">activity_id</th>
				<th data-options="field:'accessSystemName',hidden:true">系统名称</th>
				<th data-options="field:'accessSystemId',width:100">系统标识</th>
				<th data-options="field:'activityName',width:100">活动名称</th>
				<th data-options="field:'state',width:100 ,formatter:switchstate">状态</th>
			</tr>
			</thead>
		</table>
		<div id="Grid_Toolbar">
			<form id="searchForm" name="searchForm">
				<input class="easyui-combobox" id="id" name="id" labelWidth="100"
				       data-options="
											        url:'${ctx}/accesssystem/systemActivity/systemActivitys',
											        textField:'activityName',
											        valueField:'id',
											        panelHeight:'150',
											        editable:false,
											        prompt:'活动名称'">
				<input class="easyui-textbox" id="accessSystemId" name="accessSystemId" labelWidth="70" data-options="validType:'special',validType:'special',prompt:'系统标识'">
				<input class="easyui-combobox" id="state" name="state" labelWidth="100"
				       data-options="
											url:'${ctx}/enumData/lieBao/enumsSystemActivityIsOpen',
											textField:'label',
											panelHeight:'auto',
											editable:false,
											prompt:'状态'">
				<a id="btnSearch" href="javascript:void(0)" class="easyui-linkbutton button-primary"><i class="fa fa-search fa-lg"></i>&nbsp;&nbsp;查询</a>
				<a href="javascript:void(0)" class="easyui-linkbutton reset l-btn l-btn-small" plain="true" onclick="resetForm('searchForm')"><i class="fa fa-repeat fa-lg"></i>&nbsp;&nbsp;重置</a>

				<div class="pull-right">
					<shiro:hasPermission name="systemActivity:assigning">
						<a id="btnAssigningUsers" href="javascript:void(0)" class="easyui-linkbutton button-success"><i class="fa fa-hand-o-up fa-lg"></i>&nbsp;&nbsp;参与活动</a>
					</shiro:hasPermission>
					<shiro:hasPermission name="systemActivity:details">
						<a id="btnDetails" href="javascript:void(0)" class="easyui-linkbutton button-danger"><i class="fa fa-minus-circle fa-lg"></i>&nbsp;&nbsp;查看详情</a>
					</shiro:hasPermission>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- js脚本，必须写在body中，tab的url加载模式只会异步加载body中的内容到tab中 -->
<script type="text/javascript">
	require(['jquery','common'], function($){

		// 给分配用户按钮添加点击事件
		$("#btnAssigningUsers").on('click', function(){
			var selected = $("#Grid").datagrid('getSelections');
			if(selected.length == 0){
				$.messager.alert('提示','请选择需要参与的活动', "info");
			}
			var state = selected[0].state; 
			if(selected.length > 1){
				$.messager.alert('提示','只能选择一条活动记录', "info");
			}else if("1" != state){
				$.messager.alert('提示','活动未开始，不可参与', "info");
			}else {
				showDialog('参与活动', '${ctx}/accesssystem/systemActivity/assigning?id=' + selected[0].id, 600, 400);
			}

		});

		// 给查询按钮添加点击事件
		$("#btnSearch").on('click', function(){
			if($('#searchForm').form('enableValidation').form('validate')){
				reload();
			}
		});

		// 给修改按钮添加点击事件
		$("#btnUpdate").on('click', function(){
			var selected = $("#Grid").datagrid('getSelections');
			if(selected.length == 0){
				$.messager.alert('提示','请选择需要修改的记录', "info");
			}
			if(selected.length > 1){
				$.messager.alert('提示','只能选择一条需要修改的记录', "info");
			}
			if(selected.length == 1){
				showDialog('修改', '${ctx}/accesssystem/systemActivity/edit?id=' + selected[0].id, 800, 500, function () {
					$('#Grid').datagrid('reload');
				});
			}
		});

		// 给详情按钮添加点击事件
		$("#btnDetails").on('click', function(){
			var selected = $("#Grid").datagrid('getSelections');
			if(selected.length == 0){
				$.messager.alert('提示','请选择查看的记录', "info");
			}else{
				showDialog('<i class="fa fa-eye fa-lg"></i>&nbsp;&nbsp;详情页面', '${ctx}/accesssystem/systemActivity/view?id=' + selected[0].id, 800, 500);
			}
		});

		// 给删除按钮添加点击事件
		$("#btnDelete").on('click', function(){
			var selected = $("#Grid").datagrid('getSelections');
			var state = selected[0].state;
			if(selected.length == 0){
				$.messager.alert('提示','请选择需要删除的记录', "info");
			}else if ("2" != state){
				$.messager.alert('提示','活动未关闭，不可删除', "info");
			}else{
				$.messager.confirm('警告', '确认删除本条记录吗?', function (r) {
					if(r){
						var ids = '';
						for (var i = 0; i < selected.length; i++) {
							ids += selected[i].id + ',';
						}

						$.ajax({
							url: '${ctx}/accesssystem/systemActivity/delete',
							data: {
								ids: ids
							},
							type: 'post',
							dataType: 'json',
							success: function (json) {
								if (json && json.rtnCode == '00000000') {
									$.messager.alert('提示', "删除成功", "success");
									$('#Grid').datagrid('reload');
								} else {
									$.messager.alert('提示', json.rtnMsg);
								}
							}
						});
					}
				});
			}
		});
	});

	/**
	 * Easyui重置表单
	 * @param formId
	 */
	function resetForm(formId){
		$('#'+formId).form('clear');
		reload();
	};

	function reload(){
		var params = $('#Grid').datagrid('options').queryParams;
		params.id = $('#id').val();
		params.accessSystemId = $('#accessSystemId').val();
		params.state = $('#state').val();
		params.isDelete = $('#isDelete').val();
		$('#Grid').datagrid('options').queryParams = params;
		$('#Grid').datagrid('reload');
	}

	function onDblClickRow (index, row) {
		showDialog('<i class="fa fa-eye fa-lg"></i>&nbsp;&nbsp;详情页面', '/admin/accesssystem/systemActivity/view?id=' + row.id, 800, 500);
	}
	
	function switchstate(value,rowData,rowIndex){
		var operate = '';
		if(value == "1"){ // 1 开启
			operate = '<div class="switch active" id='+rowData.id+' onclick="switchClick(\''+value+'\',\''+rowData.id+'\',\''+rowIndex+'\',this)"><div><b></b></div></div>';
		}else if(value == "2" || value == "0" ){ // 1 关闭
			operate = '<div class="switch" id='+rowData.id+' onclick="switchClick(\''+value+'\',\''+rowData.id+'\',\''+rowIndex+'\',this)"><div><b></b></div></div>';
		}
		return operate;
	}
	
	function switchClick(value,id,index,e){
		var msg = (value=="1"?"关闭":"开启");
		$.messager.confirm('警告', '您确定'+msg+'吗?', function (r) {
			if(r) {
				value=(value=="1"?"2":"1");
				$.post('${ctx}/accesssystem/systemActivity/updateIsOpen',{id:id,state:value},function(data){
					if(data.rtnCode == '00000000'){//修改成功
						$("#Grid").datagrid("updateRow",{  
                            index:index, //行索引  
                            row:{  
                                isOpen:value //行中的某个字段  
                            }  
                        });  
						if(value == "1"){
							$("#"+id).addClass("active");
						}else if(value == "2" || value == "0" ){
							$("#"+id).removeClass("active");
						}
					}else{
						$.messager.alert('提示',data.rtnMsg, "info");
					}
					reload();
				});
			}
		});
	}
</script>
</body>
</html>